﻿<template>
  <!--本组件仅规则说明页单独使用-->
  <div
    class="static-header-bar-module"
    :style="{
      opacity: opacity === 0 ? null : opacity,
      background: bgColor,
      paddingTop: paddingTop,
    }"
  >
    <div class="left">
      <div
        class="left_arr"
        :style="{ 'background-image': leftBackIcon }"
        @click="goBack"
      ></div>
    </div>
    <div class="center">
      <div class="page-title">
        {{ title }}
      </div>
    </div>
    <div class="right">
      <div class="right-content">
        <!-- <div
          class="share"
          v-if="isShare"
          @click="openShare"
          v-bind:style="{'background-image':shareIcon}"
        ></div>-->
      </div>
    </div>
    <!-- <ShareModule ref="sharecomponent" /> -->
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import ua from '@/util/ua'

export default {
  name: 'StaticHeaderModule',
  components: {},
  props: {
    title: {
      type: String,
      default:''
    },
  },
  data () {
    return {
      opacity: 0,
      bgColor: 'rgba(0,0,0,0)',
      leftBackIcon: 'url(/headerBar/left_white_arr.png)',
      shareIcon: 'url(/headerBar/share_white.png)',
      textColor: '#FFFFFF',
    }
  },

  computed: {
    ...mapGetters('main', ['pageContent']),
    paddingTop () {
      if (tool.isAndroid()) {
        return null
      } else if (ua.isIphoneXup) {
        return 34 / 50 + 'rem'
      } else {
        return 17 / 50 + 'rem'
      }
    },
  },
  mounted () {
    this.initStyle()
    if (typeof App !== 'undefined' && tool.IS_NATIVE()) {
      window.App.call('setHeaderVisible', {
        data: {
          visible: 'F',
        },
      })
    }
  },
  methods: {
    ...mapMutations('main', ['editComponent']),

    goBack () {
      // this.$router.push('/mobile')
      // history.go(-1)
      this.$router.back()

    },
    initStyle () {
      let _this = this
      _this.opacity = 1
      _this.bgColor = '#FFFFFF'
      _this.leftBackIcon = 'url(\'https://cdn.daikuan.360.cn/lego/headerBar/left_arr.png\')'
      _this.shareIcon = 'url(\'https://cdn.daikuan.360.cn/lego/headerBar/share.png\')'
      _this.textColor = 'rgba(51, 51, 51, 1)'
    },
  }
}
</script>
<style lang="less" scoped>
.static-header-bar-module {
  height: 48px;

  border-bottom: 0.5px solid rgba(238, 238, 238, 1);

  width: 100%;
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;

  .left {
    flex: 1;
    display: flex;
    align-items: center;

    .left_arr {
      width: 29px;
      height: 29px;
      margin-left: 15px;
      background-size: 100% 100%;
    }
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .page-title {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);

      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .right-rule {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      margin-left: 10px;
    }
    .share {
      width: 29px;
      height: 29px;
      background-size: 100% 100%;
    }

    .right-content {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
